1. 過度巢狀的例子
   .container {
   .header {
   .nav {
   ul {
   li {
   a {
   &:hover {
   color: red;
   }
   }
   }
   }
   }
   }
   }

• 巢狀過深，不易維護

• 優化後
  .nav {
  ul {
  li {
  a {
  &:hover {
  color: red;
  }
  }
  }
  }
  }

• 不需要使用 .container .header 等過多的巢狀，可以大幅提升可讀性和可維護性

• 父選擇器例子

• 假設希望給 .button 元素添加 :hover 狀態的樣式

2. CSS寫法
   .button {
   background-color: #3498db;
   }

.button:hover {
background-color: #2980b9;
}

• 使用父選擇器的Sass/SCSS寫法
  .button {
  background-color: #3498db;

  &:hover {
  background-color: #2980b9;
  }
  }

• & 符號表示父級選擇器 .button，所以 &:hover 編譯後變成 .button:hover

• 避免重複寫 .button，使程式碼更簡潔

• 偽類選擇器

• 當一個按鈕在鼠標懸停時變化顏色

3. CSS寫法
   .button {
   background-color: blue;
   }

.button:hover {
background-color: green;
}

• 使用父選擇器的Sass/SCSS寫法
  .button {
  background-color: blue;

  &:hover {
  background-color: green;
  }
  }

4. 複合選擇器

• 當需要為某一個元素應用多個 class 組合

• CSS寫法
  .button {
  background-color: blue;
  }

.button.active {
background-color: green;
}

• 使用父選擇器的Sass/SCSS寫法
  .button {
  background-color: blue;

  &.active {
  background-color: green;
  }
  }

• &.active 用於產生 .button.active

• 父選擇器在媒體查詢中使用

• 在不同的螢幕寬度下，樣式可能會有所不同

• 使用父選擇器可以保持父選擇器的繼續應用，而不用重新書寫選擇器名稱

5. CSS寫法
   .card {
   background-color: white;
   }

@media (max-width: 600px) {
.card {
background-color: grey;
}
}

• 使用父選擇器的Sass/SCSS寫法
  .card {
  background-color: white;

  @media (max-width: 600px) {
  & {
  background-color: grey;
  }
  }
  }